<template>
    <el-card>
      <h2>用户信息</h2>
      <el-form label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="user.username" disabled />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email" disabled />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="newPassword" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button @click="updateProfile">更新信息</el-button>
          <el-button @click="logout">退出登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </template>
  
  <script>
  export default {
    computed: {
      user() {
        return this.$store.state.user
      }
    },
    data() {
      return {
        newPassword: ''
      }
    },
    methods: {
      updateProfile() {
        this.$store.dispatch('updateProfile', {
          password: this.newPassword
        })
      },
      logout() {
        this.$store.dispatch('logout')
        this.$router.push('/')
      }
    }
  }
  </script>